<template>
    <div>
        <el-alert title="错误提示的文案" type="info">
        </el-alert>
        <!-- 图片框列表 -->
        <div ref="banner" class="banner-ul flex unified-flex-align unified-flex-space-around">            
            <div ref="banner-box" class="banner-box unified-cursor-default unified-text-select"
                v-for="(item,index) in list" :key="index">
                <div class="banner-li">

                    <!-- 加号按钮 -->
                    <div v-if="!item.status" class="upload-icon unifined-media-border el-icon-plus unified-transition"
                        @click="clickUploadBtn(index)">

                    </div>

                    <!-- 图片展示 -->
                    <div v-else class="upload-img">

                        <!-- 图片清除按钮 -->
                        <div class="upload-img-delete el-icon-close" @click="deleteUploadImg(index)"></div>
                        <!-- 图片预览按钮 -->
                        <div class="upload-img-preview el-icon-view"></div>
                        <!-- 图片框 -->
                        <img :src="item.file_url">
                    </div>
                    <input @change="uploadFileHandle(index,$event)" class="upload-input" ref="upload-input" type="file"
                        name="" id="" value="" />

                </div>

                <div class="banner-title">{{item.title}}</div>




            </div>




        </div>






    </div>



</template>

<script>
    // 
    export default {
        
        mounted() {
          console.log('轮播图列表');
          console.log(this.list);  
        },
        
        
        props: {
            leftWidth: {
                type: Number,
                default: 4
            },
            list: { // 图片资源列表
                type: Array,
                default () {
                    return []
                }
            }
        },
        data() {
            return {
            }
        },

        computed: {

            imagesName() {

                return 'this.$store.state'
            }

        },
        methods: {

            // 点击上传按钮
            clickUploadBtn(index) {
                
                this.$emit('upload')
                
                
                if (index != 0) {

                    let status = this.list[index - 1].status
                    if (status) {
                        let fileDom = this.$refs['upload-input']
                        fileDom[index].click()
                    } else {
                        this.$message.error('请按照顺序上传图片')
                    }


                } else {
                    let status = this.list[index].status
                    if (status) {
                        this.$message.error('上传文件失败，已有资源')
                    } else {
                        let fileDom = this.$refs['upload-input']
                        fileDom[index].click()
                    }
                }




            },
            // 点击删除图片
            deleteUploadImg(index) {
                this.list[index].file = {}
                this.list[index].file_url = ""
                this.list[index].file_name = ""
                this.list[index].file_type = ""
                this.list[index].file_size = null
                this.list[index].status = false
                let fileDom = this.$refs['upload-input'][index]
                fileDom.value = null;
            },
            // 文件选择处理
            uploadFileHandle(index, event) {

                // 文件对象
                let file = event.target.files[0]
                // 文件大小
                let fileSize = file.size
                console.log('文件大小：' + fileSize);
                // 文件类型
                let fileType = file.type
                console.log('文件类型：' + fileType);
                // 文件名称
                let fileName = file.name
                console.log('文件名称：' + fileName);
                // 允许上传的文件类型
                // let allow =['type']
                // 文件本地地址
                let fileUrl = URL.createObjectURL(file)

                this.list[index].file = file
                this.list[index].file_url = fileUrl
                this.list[index].file_name = fileName
                this.list[index].file_type = fileType
                this.list[index].file_size = fileSize
                this.list[index].status = true
            },
            upload(e, index) {
                // 如果有选择文件,则取出 files的第一个元素,
                if (e.target.files.length) {
                    let file = e.target.files[0]
                    // 将文件对象 处理 并返回一个文件地址
                    let file_src = window.URL.createObjectURL(file);
                    // 将处理好的文件数据,emit传给父组件
                    this.$emit('image_change', {
                        index,
                        file: file,
                        path: file_src
                    })
                }
            },
            // 图片缩略图点击了预览图标
            look_image(index) {
                this.$emit('image_look', index)
            },
            // 图片删除
            remove_image(index) {
                this.$emit('image_remove', index)
            },
            // 视频删除
            remove_video() {
                this.$emit('video_remove')
            },
            // 视频缩略图点击了预览图标
            look_video() {
                this.$emit('video_look')
            }
        }

    }
</script>

<style scoped="scoped">
    .banner-ul {
        margin-top: 20px;
    }

    .banner-box {
        flex: 1;
        height: 100%;
        margin-right: 20px;
        /* min-width: 160px; */
       
    }
    .upload-img-preview{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: rgba(0,0,0,.5);
        border-radius: 50%;
        line-height: 50px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        box-shadow: 0px 0px 0px 100px  rgba(0,0,0,.5);
        transform: translate(-50%,-50%);
    }
    .upload-img-preview:hover{
        color: #6495ED;
    }
    .banner-box:last-child {
        margin-right: 0px;
    }

    .banner-li {
        height: 160px;
         overflow: hidden;
    }

    .upload-icon {
        width: 100%;
        height: 100%;
        line-height: 160px;
        text-align: center;
        font-size: 35px;
        color: #C3C3C3;
        box-sizing: border-box;

    }

    .upload-img {
        width: 100%;
        height: 100%;
        background-color: #00ABFD;
        position: relative;
    }

    .upload-img-delete {
        position: absolute;
        top: -7px;
        right: -7px;
        height: 30px;
        width: 30px;
        background-color: #F74F0E;
        /* border-radius: 50%; */
        
        border-bottom-left-radius: 25px;
        line-height: 31px;
        text-align: center;
        color: #fff;
        z-index: 10;
    }

    .upload-img img {
        width: 100%;
        height: 100%;
        background-position: center;
    }

    .upload-input {
        display: none;
    }

    .upload-icon:hover {
        cursor: crosshair;
        border-color: #2C3E50;
        color: #2C3E50;
    }

    .banner-title {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #555555;
        letter-spacing: 2px;
    }
</style>
